import React, { useState } from 'react';
import { Card, Row, Col, Icon, Statistic, Tooltip, List } from 'antd';
import _ from 'lodash';
import styles from '../index.less';

const GroupMonitoring = props => {
  const grid = {
    gutter: 10,
    xs: 1,
    sm: 2,
    md: 3,
    lg: 3,
    xl: 6,
    xxl: 6,
  };
  return (
    <List
      className={styles.groupMonitoring}
      grid={grid}
      dataSource={props.projectIndexUsingItems}
      renderItem={item => (
        <List.Item>
          <Card>
            <Row gutter={[0, 10]}>
              <Col>
                <Row type="flex" justify="center" align="middle">
                  <Col>
                    <Tooltip placement="topLeft" title={item.value.toFixed(item.precision)}>
                      <div className="ellipsis">
                        <Statistic
                          className="font-size32"
                          title={item.title}
                          value={item.value.toFixed(item.precision)}
                        />
                      </div>
                    </Tooltip>
                  </Col>
                </Row>
              </Col>
              <Col>
                {item.content && !_.isEmpty(item.content)
                  ? item.content.map((e, i) => (
                      <Row type="flex" justify="space-between" key={i}>
                        {e.suffix1 ? (
                          <Col>
                            <Tooltip placement="topLeft" title={e.value1.toFixed(e.precision)}>
                              <div className="ellipsis">
                                <Statistic
                                  suffix={e.suffix1}
                                  value={e.value1.toFixed(e.precision)}
                                />
                              </div>
                            </Tooltip>
                          </Col>
                        ) : null}
                        {e.suffix2 ? (
                          <Col>
                            <Tooltip placement="topLeft" title={e.value1.toFixed(e.precision)}>
                              <div className="ellipsis">
                                <Statistic
                                  suffix={e.suffix2}
                                  value={e.value2.toFixed(e.precision)}
                                />
                              </div>
                            </Tooltip>
                          </Col>
                        ) : null}
                      </Row>
                    ))
                  : null}
              </Col>
            </Row>
          </Card>
        </List.Item>
      )}
    />
  );
};

export default GroupMonitoring;
